<template>
  <Chat :config="config" style="width: 500px" @load-more="loadMore" />
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import Chat, { ConfigApi } from '@/components/chat/chat.vue'
import { usePage } from 'undraw-ui'

const config = reactive<ConfigApi>({
  user: {
    id: 1,
    username: 'user',
    avatar: ''
  },
  data: []
})

let data = [
  {
    id: 10,
    content: 'test10',
    uid: 1,
    user: {
      username: 'user',
      avatar: ''
    },
    createTime: '昨天 18:33'
  },
  {
    id: 9,
    content: 'test9',
    uid: 2,
    user: {
      username: 'user2',
      avatar: ''
    },
    createTime: '昨天 18:33'
  },
  {
    id: 8,
    content: 'test8',
    uid: 1,
    user: {
      username: 'user',
      avatar: ''
    },
    createTime: '昨天 18:33'
  },
  {
    id: 7,
    content: 'test7',
    uid: 2,
    user: {
      username: 'user2',
      avatar: ''
    },
    createTime: '昨天 18:33'
  },
  {
    id: 6,
    content: 'test6',
    uid: 1,
    user: {
      username: 'user',
      avatar: ''
    },
    createTime: '昨天 18:33'
  },
  {
    id: 5,
    content: 'test5',
    uid: 1,
    user: {
      username: 'user2',
      avatar: ''
    },
    createTime: '昨天 18:33'
  },
  {
    id: 4,
    content: 'test4',
    uid: 1,
    user: {
      username: 'user',
      avatar: ''
    },
    createTime: '昨天 18:33'
  },
  {
    id: 3,
    content: 'test3',
    uid: 1,
    user: {
      username: 'user',
      avatar: ''
    },
    createTime: '昨天 18:33'
  },
  {
    id: 2,
    content: 'test2',
    uid: 1,
    user: {
      username: 'user',
      avatar: ''
    },
    createTime: '昨天 18:33'
  },
  {
    id: 1,
    content: 'test1',
    uid: 2,
    user: {
      username: 'user2',
      avatar: ''
    },
    createTime: '昨天 18:33'
  }
]

let n = 0
function loadMore(finish: Function) {
  if (n <= Math.ceil(data.length / 4)) {
    finish(usePage(++n, 4, data))
  }
}
</script>

<style lang="scss" scoped></style>
